<!-- 引入公共部分 -->
{{extend './common/layout.html'}}
<!-- 引入css链接（填空） -->
{{block 'link'}}
<link rel="stylesheet" href="/static/home/css/search.css">
{{/block}}

<!-- 引入主题部分 -->
{{block 'main'}}
<header>
{{include './common/header.html'}}
{{include './common/headerNav.html'}}
{{include './common/aside.html'}}
</header>
<div class="headInner">
    
    <!-- 开头全部结果 -->
    <div class="searchFinal">
        <ul>
            <li class="searchItem">
                <span><a href="">全部结果</a></span>
                <span><i class="iconfont zuo" style="font-size: 12px;"></i></span>
            </li>
            <!-- 动态 -->
            <li class="searchItem"> <strong>女式大衣中长款</strong> </li>
        </ul>
        <div style="clear: both;"></div>
    </div>
    <!-- 筛选分类 -->
    <div class="searchScreenListCtn">
        <div class="searchScreenList">
            <!--品牌 -->
            <div class="screenList">
                <!-- 动态添加 -->
                <h3>品牌</h3>
                <div class="screenListContent">
                    <div class="screenListDetail">
                        <!-- 内容动态添加 -->
                        <ul class="detailData">
                            <li class="detailDataLi"><a href="">
                                <span class="checkbox"><i class="iconfont fuxuankuangkong"></i></span>
                                <span>欧莱雅</span>
                            </a></li>
                            <li class="detailDataLi"><a href="">
                                <span class="checkbox"><i class="iconfont fuxuankuangkong"></i></span>
                                <span>欧莱雅</span>
                            </a></li>
                            <li class="detailDataLi"><a href="">
                                <span class="checkbox"><i class="iconfont fuxuankuangkong"></i></span>
                                <span>欧莱雅</span>
                            </a></li>
                            <li class="detailDataLi"><a href="">
                                <span class="checkbox"><i class="iconfont fuxuankuangkong"></i></span>
                                <span>欧莱雅</span>
                            </a></li>
                            <li class="detailDataLi"><a href="">
                                <span class="checkbox"><i class="iconfont fuxuankuangkong"></i></span>
                                <span>欧莱雅</span>
                            </a></li>
                            <li class="detailDataLi"><a href="">
                                <span class="checkbox"><i class="iconfont fuxuankuangkong"></i></span>
                                <span>欧莱雅</span>
                            </a></li>
                            <li class="detailDataLi"><a href="">
                                <span class="checkbox"><i class="iconfont fuxuankuangkong"></i></span>
                                <span>欧莱雅</span>
                            </a></li>
                            <li class="detailDataLi"><a href="">
                                <span class="checkbox"><i class="iconfont fuxuankuangkong"></i></span>
                                <span>欧莱雅</span>
                            </a></li>
                            <li class="detailDataLi"><a href="">
                                <span class="checkbox"><i class="iconfont fuxuankuangkong"></i></span>
                                <span>欧莱雅</span>
                            </a></li>
                            <div style="clear: both;"></div>
                        </ul>
                    </div>
                </div>
                <div style="clear: both;"></div>
                <div class="screenListOperation">
                    <!-- 没有第二行就不显示更多 -->
                    <button class="operationMore">
                        <span>确定</span>
                        <!-- <span><i class="iconfont xiajiantou"></i></span> -->
                    </button>
                    <button class="operationMultiple">
                        <!-- <span><i class="iconfont jiahao"></i></span> -->
                        <span>取消</span>
                    </button>
                </div>
            </div>
            <!-- 品类 -->
            <div class="screenList">
                <!-- 动态添加 -->
                <h3>品类</h3>
                <div class="screenListContent">
                    <div class="screenListDetail">
                        <!-- 内容动态添加 -->
                        <ul class="detailData">
                            <li class="detailDataLi"><a href="">女上装</a></li>
                            <li class="detailDataLi"><a href="">女上装</a></li>
                            <li class="detailDataLi"><a href="">女上装</a></li>
                            <li class="detailDataLi"><a href="">女上装</a></li>
                            <li class="detailDataLi"><a href="">女上装</a></li>
                            <li class="detailDataLi"><a href="">女上装</a></li>
                            <li class="detailDataLi"><a href="">女上装</a></li>
                            <li class="detailDataLi"><a href="">女上装</a></li>
                            <li class="detailDataLi"><a href="">女上装</a></li>
                            <div style="clear: both;"></div>
                        </ul>
                    </div>
                </div>
                <div style="clear: both;"></div>
                <div class="screenListOperation">
                    <!-- 没有第二行就不显示更多 -->
                    <button class="operationMore">
                        <span>确定</span>
                        <!-- <span><i class="iconfont xiajiantou"></i></span> -->
                    </button>
                    <button class="operationMultiple">
                        <!-- <span><i class="iconfont jiahao"></i></span> -->
                        <span>取消</span>
                    </button>
                </div>
            </div>
            <!-- 尺码 -->
            <div class="screenList">
                <!-- 动态添加 -->
                <h3>尺码</h3>
                <div class="screenListContent">
                    <div class="screenListDetail">
                        <!-- 内容动态添加 -->
                        <ul class="detailData">
                            <li><a href="">XXS</a></li>
                            <li><a href="">XS</a></li>
                            <li><a href="">S</a></li>
                            <li><a href="">M</a></li>
                            <li><a href="">L</a></li>
                            <li><a href="">XL</a></li>
                            <li><a href="">2XL</a></li>
                            <li><a href="">4XL</a></li>
                            <li><a href="">5XL</a></li>
                            <li><a href="">6XL</a></li>
                            <li><a href="">7XL</a></li>
                            <li><a href="">2</a></li>
                            <li><a href="">4</a></li>
                            <li><a href="">6</a></li>
                            <li><a href="">8</a></li>
                            <li><a href="">10</a></li>
                            <li><a href="">12</a></li>
                            <li><a href="">14</a></li>
                            <li><a href="">16</a></li>
                            <li><a href="">18</a></li>
                            <li><a href="">32</a></li>
                            <li><a href="">34</a></li>
                            <div style="clear: both;"></div>
                        </ul>
                    </div>
                </div>
                <div style="clear: both;"></div>
                <div class="screenListOperation">
                    <!-- 没有第二行就不显示更多 -->
                    <button class="operationMore">
                        <span>确定</span>
                        <!-- <span><i class="iconfont xiajiantou"></i></span> -->
                    </button>
                    <button class="operationMultiple">
                        <!-- <span><i class="iconfont jiahao"></i></span> -->
                        <span>取消</span>
                    </button>
                </div>
            </div>
            <!-- 厚薄 -->
            <div class="screenList">
                <!-- 动态添加 -->
                <h3>厚薄</h3>
                <div class="screenListContent">
                    <div class="screenListDetail">
                        <!-- 内容动态添加 -->
                        <ul class="detailData">
                            <li><a href="">薄</a></li>
                            <li><a href="">常规</a></li>
                            <li><a href="">厚</a></li>
                            <li><a href="">加厚</a></li>
                            <li><a href="">加绒加厚</a></li>
                            <li><a href="">加棉加厚</a></li>
                            <div style="clear: both;"></div>
                        </ul>
                    </div>
                </div>
                <div style="clear: both;"></div>
                <div class="screenListOperation">
                    <!-- 没有第二行就不显示更多 -->
                    <button class="operationMore">
                        <span>确定</span>
                        <!-- <span><i class="iconfont xiajiantou"></i></span> -->
                    </button>
                    <button class="operationMultiple">
                        <!-- <span><i class="iconfont jiahao"></i></span> -->
                        <span>取消</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="searchScreenListMore">
            <button class="ListExpand">
                <span>更多选项</span>
                <span><i class="iconfont xiajiantou"></i></span>
            </button>
            <button class="ListCollaps ListExpand">
                <span>点击收起</span>
                <span><i class="iconfont xiangshangjiantou"></i></span>
            </button>
        </div>
    </div>
    <!-- 根据全部、销量排序 -->
    <div class="sortBar">
        <div class="sortBarCtn">
            <!-- 分页-->
            <!-- <div class="sortBarPaging">
                <span class="total">
                    <em class="focus">1</em>
                    /28
                </span>
                <a href="javascript:;">
                <i class="iconfont zuoyoujiantou2" style="font-size: 14px;"></i>
                </a>
                <a href="javascript:;" class="changePages">
                    下一页
                    <i class="iconfont zuo" style="font-size: 14px;"></i>
                </a>
            </div> -->
            <!-- 综合 -->
            <div class="sortGeneral">
                <div class="sortGeneralCtn">
                    <p class="sortGeneralP" onclick="searchBody()">综合</p>
                </div>
            </div>
            <!-- 销量 -->
            <!-- <div class="sortSale">
                <div class="sortSaleCtn">
                    <div class="sortSaleP">
                        销量
                    </div>
                </div>
            </div> -->
            <!-- 价格区间 -->
            <div class="sortSelect">
                <div class="sortSelectInner">
                    <span class="sortSelectStart">
                        <input type="text" placeholder="￥" id="priceStart">
                    </span>
                    <i>-</i>
                    <span class="sortSelectEnd">
                        <input type="text" placeholder="￥" id="priceEnd">
                    </span>
                    <span class="sortBtnI" onclick="moneySearch()">确定</span>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>
    <!-- 搜索结果 -->
    <section class="searchAllFinal">
        <!-- <div class="searchAllFinalItem">
            <a href="javascript:;">
                <div class="finalItemImg">
                    <img src="/static/home/image/clothes.jpg" alt="">
                </div>
                <h2>超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒
                </h2>
            </a>
            <p>￥99.9</p>
        </div> -->
        <!-- <div class="searchAllFinalItem">
            <a href="javascript:;">
                <div class="finalItemImg">
                    <img src="/static/home/image/clothes.jpg" alt="">
                </div>
                <h2>超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒
                </h2>
            </a>
            <p>￥99.9</p>
        </div>
        <div class="searchAllFinalItem">
            <a href="javascript:;">
                <div class="finalItemImg">
                    <img src="/static/home/image/clothes.jpg" alt="">
                </div>
                <h2>超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒
                </h2>
            </a>
            <p>￥99.9</p>
        </div>
        <div class="searchAllFinalItem">
            <a href="javascript:;">
                <div class="finalItemImg">
                    <img src="/static/home/image/clothes.jpg" alt="">
                </div>
                <h2>超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒
                </h2>
            </a>
            <p>￥99.9</p>
        </div>
        <div class="searchAllFinalItem">
            <a href="javascript:;">
                <div class="finalItemImg">
                    <img src="/static/home/image/clothes.jpg" alt="">
                </div>
                <h2>超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒
                </h2>
            </a>
            <p>￥99.9</p>
        </div>
        <div class="searchAllFinalItem">
            <a href="javascript:;">
                <div class="finalItemImg">
                    <img src="/static/home/image/clothes.jpg" alt="">
                </div>
                <h2>超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒
                </h2>
            </a>
            <p>￥99.9</p>
        </div>
        <div class="searchAllFinalItem">
            <a href="javascript:;">
                <div class="finalItemImg">
                    <img src="/static/home/image/clothes.jpg" alt="">
                </div>
                <h2>超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒
                </h2>
            </a>
            <p>￥99.9</p>
        </div>
        <div class="searchAllFinalItem">
            <a href="javascript:;">
                <div class="finalItemImg">
                    <img src="/static/home/image/clothes.jpg" alt="">
                </div>
                <h2>超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒超火cec连帽卫衣女百搭秋季宽松韩版ins加厚原宿风bf慵懒
                </h2>
            </a>
            <p>￥99.9</p>
        </div> -->
    </section>
</div>


<footer>
    {{include './common/footer.html'}}
</footer>
{{block 'script'}}
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="/static/home/js/search.js"></script>
{{/block}} 

{{/block}}